<script setup>
import { ref } from "vue";
import { upDataPasswordApi } from "../../api/auth";

const formData = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const rules = ref({
  oldPassword: {
    rules: [{ required: true, errorMessage: "请输入旧密码" }],
  },
  newPassword: {
    rules: [{ required: true, errorMessage: "请输入新密码" }],
  },
  confirmPassword: {
    rules: [{ required: true, errorMessage: "请输入确认密码" }],
  },
});

const form = ref(null);
const submit = () => {
  form.value
    .validate()
    .then(async (res) => {
      console.log(res);

      if (formData.value.newPassword !== formData.value.confirmPassword) {
        return uni.showToast({
          title: "两次密码不一致",
          icon: "none",
        });
      }

      await upDataPasswordApi(formData.value);
      // 跳转登录页面
      uni.reLaunch({ url: "/pages/auth/index" });
    })
    .catch((err) => {});
};
</script>

<template>
  <view class="password">
    <uni-forms
      ref="form"
      :value="formData"
      :rules="rules"
      labelWidth="100"
      label-position="top"
    >
      <uni-forms-item name="oldPassword" label="旧密码" required>
        <uni-easyinput
          v-model="formData.oldPassword"
          placeholder="请输入旧密码"
        />
      </uni-forms-item>

      <uni-forms-item name="newPassword" label="新密码" required>
        <uni-easyinput
          v-model="formData.newPassword"
          placeholder="请输入新密码"
        />
      </uni-forms-item>

      <uni-forms-item name="confirmPassword" label="确认密码" required>
        <uni-easyinput
          v-model="formData.confirmPassword"
          placeholder="请再次输入新密码"
        />
      </uni-forms-item>

      <view class="password__btn-box">
        <button type="primary" @click="submit">修改</button>
      </view>
    </uni-forms>
  </view>
</template>
